<template>
  <div class="login-container">
    <van-field v-model="phoneNumber" placeholder="请输入手机号" clearable />

    <!-- 滑块验证 -->
    <div class="slider-verification-container" v-if="!isSliderVerified">
      <van-slider v-model="sliderValue" @drag-end="handleSliderDragEnd" />
    </div>
    <div
    <!-- 短信验证码按钮 -->
    <van-button
        type="primary"
        @click="sendVerificationCode"
        :disabled="!isSliderVerified || countdown > 0"
    >
      {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
    </van-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Field, Slider, Button } from 'vant';

export default {
  name:"loginAdmin",
  components: {
    'van-field': Field,
    'van-slider': Slider,
    'van-button': Button,
  },
  setup() {
    const phoneNumber = ref('');
    const sliderValue = ref(0);
    const isSliderVerified = ref(false);
    const countdown = ref(0);

    const handleSliderDragEnd = () => {
      if (sliderValue.value === 100) {
        isSliderVerified.value = true;
      }
    };

    const sendVerificationCode = () => {
      if (phoneNumber.value.length !== 11) {
        alert('请输入有效的手机号码');
        return;
      }
      // 发送验证码逻辑
      alert('验证码已发送');
      countdown.value = 60;
      let interval = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
          clearInterval(interval);
        }
      }, 1000);
    };

    return {
      phoneNumber,
      sliderValue,
      isSliderVerified,
      countdown,
      handleSliderDragEnd,
      sendVerificationCode
    };
  }
};
</script>

<style>
.login-container {
  margin: 20px;
}
</style>
